<!--
 * @Description: 效果
 * @Author: rendc
 * @Date: 2021-09-10 10:56:42
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-10 11:28:52
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>效果</title>
  <script src="../js/jquery.js"></script>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <div>
    <p>这是一段文本</p>
    <button id="hide">隐藏</button>
    <br>
    <button style="display: none;" id="show">显示</button>
    <button id="btn">按钮</button>
  </div>
  <div>
    <div id="div1">
      你好，我是🍊
    </div>
    <button id="div1_btn">div1_btn</button>
    <button id="div1_btn2">div1_btn2</button>
    <button id="div1_btn3">div1_btn3</button>
  </div>
</body>
<script>
  // 链式调用
  $("#div1").css("color", "orange")
    .slideUp(2000)
    .slideDown(200)
    .fadeOut(200)
    .fadeIn(200);
  // 滑动
  $("#div1_btn").click(function () {
    $("#div1").slideUp(1000);
  })
  $("#div1_btn2").click(function () {
    $("#div1").slideDown(5000);
  })
  $("#div1_btn3").click(function () {
    $("#div1").slideToggle();
  })

  // 淡入淡出效果
  $("#div1_btn").click(function () {
    $("#div1").fadeOut();
  })
  $("#div1_btn2").click(function () {
    $("#div1").fadeIn();
  })
  // 显示与隐藏
  $('#hide').click(function () {
    $(this).hide('fast', function () {
      // alert("我藏好了，你开始找吧")
      $("p").hide(1000);
      $('#show').show(1000);
    });
  })
  $('#show').click(function () {
    $(this).hide(1000);
    $('#hide').show(1000);
    $("p").show(1000);
  })
  $("#btn").click(function () {
    $("p").toggle(1000, function () {
      console.log("元素显示状态被切换");
    });
  })
</script>

</html>